import React, { Suspense } from 'react'
import './App.css'

// 导入路由相关的依赖
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'

// import { isAuth } from './utils/token'
import AuthRoute from './components/AuthRoute'

// 导入子组件
/**
import Login from './views/Login'
import Layout from './views/Layout'
import CityList from './views/CityList'
import Map from './views/Map'
import Detail from './views/Detail'
import Rent from './views/Rent'
import RentAdd from './views/Rent/Add'
import RentSearch from './views/Rent/Search'
import NotFound from './views/404'
 */
const Login = React.lazy(() => import('./views/Login'))
const Layout = React.lazy(() => import('./views/Layout'))
const CityList = React.lazy(() => import('./views/CityList'))
const Map = React.lazy(() => import('./views/Map'))
const Detail = React.lazy(() => import('./views/Detail'))
const Rent = React.lazy(() => import('./views/Rent'))
const RentAdd = React.lazy(() => import('./views/Rent/Add'))
const RentSearch = React.lazy(() => import('./views/Rent/Search'))
const NotFound = React.lazy(() => import('./views/404'))

// 以下是测试组件
// import ReduxIndex from './test/redux'

function App () {
  return (
    <div style={{ height: '100%' }}>
      <Suspense
        fallback={
          <div style={{ textAlign: 'center', marginTop: 180 }}>Loading...</div>
        }
      >
        <Router>
          <Switch>
            <Route path='/login' component={Login} />
            <Route path='/layout' component={Layout} />
            <Route path='/citylist' component={CityList} />
            <Route path='/map' component={Map} />
            <Route path='/detail/:id' component={Detail} />

            {/* 以下是测试组件 */}
            {/* <Route path='/redux' component={ReduxIndex} /> */}
            {/* 这样写，没有进行任何的权限控制 */}
            {/* <Route path='/rent' component={Rent} /> */}

            {/* 权限控制的写法 */}
            {/*
          <Route
            exact
            path='/rent'
            render={props => {
              if (isAuth()) {
                // 有权限
                return <Rent {...props} />
              } else {
                // 没有权限
                return (
                  <Redirect
                    to={{
                      pathname: '/login',
                      state: { from: props.location.pathname }
                    }}
                  />
                )
              }
            }}
          />

          <Route
            path='/rent/add'
            render={props => {
              if (isAuth()) {
                // 有权限
                return <RentAdd {...props} />
              } else {
                // 没有权限
                return (
                  <Redirect
                    to={{
                      pathname: '/login',
                      state: { from: props.location.pathname }
                    }}
                  />
                )
              }
            }}
          />
          */}

            {/* 权限控制的写法 */}
            <AuthRoute exact path='/rent' component={Rent} />
            <AuthRoute path='/rent/add' component={RentAdd} />
            <AuthRoute path='/rent/search' component={RentSearch} />

            {/* <AuthRoute exact path='/rent'>
            <Rent />
          </AuthRoute>

          <AuthRoute path='/rent/add'>
            <RentAdd />
          </AuthRoute>

          <AuthRoute path='/rent/search'>
            <RentSearch />
          </AuthRoute> */}

            <Redirect exact from='/' to='/layout' />
            <Route component={NotFound} />
          </Switch>
        </Router>
      </Suspense>
    </div>
  )
}

export default App
